<template>
  <div id="address">
  <div class="bt">&nbsp;/&nbsp;所有&nbsp;› &nbsp;个人中心</div>
      <div class="user_area">
      <div class="navigation">
        <ul>
        <li ><router-link to="./index" >基本信息</router-link></li>
        <li><router-link to="./notice" >我的消息</router-link></li>
        <li class="select"><router-link to="./address" >收货地址</router-link></li>
        <li><router-link to="./myorder" >我的订单</router-link></li>
          <li ><router-link to="./shop_car" >购物车</router-link></li>
        </ul> 
      </div>
        <div class="main">
              <transition name="fade" mode="in-out">
          <table  class="table2" cellspacing="0" cellpadding="0" v-if="is_show">
              <tr>
                <th width="800px" colspan="6">收货地址管理</th>
              </tr>
              <tr class="tr">
                <td>收货人</td>
                <td>手机号</td>
                <td>地址</td>
                <td>是否默认</td>
                <td>操作</td>
              </tr>
                <tr v-for="(item,index) in addressdata">
                  <td>
                      {{ item.cargo_person }}
                  </td>
                  <td>{{ item.phone }}</td>
                  <td>{{ item.address_basic }}<br>{{ item.address_detail }}</td>
                  <td><i class="fa fa-check" aria-hidden="true" v-if="item.is_default == 1"></i><i class="fa fa-times" aria-hidden="true" v-if="item.is_default == 0"></i></td>
                  <td><button class="default" @click="set_defalut(index)">设为默认</button><button class="change" @click="changeaddress(index)">修改</button></td>
                </tr>

                <tr>
                  <td colspan="5" style="background-color: #eee"><a href="javascript:;" @click="add_address">新增收货地址</a></td>
                </tr>
          </table>
          </transition>
                <transition name="fade" mode="in-out">
          <table  class="table2" cellspacing="0" cellpadding="0" v-if="!is_show">
              <tr>
                <th width="800px" colspan="2">新增收货地址</th>
              </tr>
              <tr>
                  <td width="200px">收货人：</td>
                  <td style="text-align: left;"><input type="text" v-model="person" ></td>
              </tr>
              <tr>
                  <td width="200px">手机号：</td>
                  <td style="text-align: left;"><input type="text" v-model="phone" ></td>
              </tr>
              <tr>
                  <td width="200px">收货地址：</td>
                  <td style="text-align: left;"><span v-if="is_address" style="margin-left: 20px">{{ address_basic }}&nbsp;&nbsp;<i class="fa fa-pencil" aria-hidden="true" style="font-size:16px" @click="is_address = !is_address"></i></span><span v-if="!is_address"><myarea @select="change_area" style="margin-left: 20px"></myarea>&nbsp;<i class="fa fa-pencil" aria-hidden="true" style="font-size:16px;line-height: 38px" @click="is_address = !is_address"></i></span></td>
              </tr>
              <tr>
                  <td width="200px">收货详细地址：</td>
                  <td style="text-align: left;"><input type="text" v-model="address_detail" ></td>
              </tr>
                <tr>
                  <td colspan="4" style="text-align: center;height: 50px;"><button class="cmt" @click="cmt_address()" v-if="!is_address">提交收货地址</button>
                  <button class="cmt warning" @click="save_address()" v-if="is_address">修改收货地址</button>
                  </td>
                </tr>
                <tr>
                  <td colspan="4" style="background-color: #eee"><a href="javascript:;" @click="back_address()">返回收货地址列表</a></td>
                </tr>
          </table> 
          </transition>         
        </div>
      </div>
  </div>
</template>

<script>
import area from "../Public/area.vue";
export default {
  data () {
    return {
      is_show:true,
      person:'',
      phone:'',
      address_basic:'',
      address_detail:'',
      addressdata:'',
      is_address:false,
      address_data:'',
      address_id:''
    }
  },
  created:function(){
    if(this.$cookie.get('uid') == ''){
      history.back();
      return;
    }
    this.get_address();
  },
  components: {
    'myarea':area,
  },
  methods: {
    add_address(){
      this.is_show=!this.is_show;
      this.changeaddress(-1);
    },
    back_address(){
      this.is_show=!this.is_show;
    },
    change_area(res){
      this.address_basic=res.pro.name+res.city.name+res.county.name;
    },
    validate(){
       let reg = /^1[3|4|5|7|8][0-9]{9}$/;
        if(reg.test(this.phone) == false){
          alert('手机号错误');
          return true;
        }else if(this.person == ''){
          alert('收货人不能为空');
          return true;
        }else if(this.address_detail == ''){
          alert('详细地址不能为空');
          return true;
        }
        this.address_data=new Object();
        this.address_data={uid:this.$cookie.get('uid'),address_basic:this.address_basic,address_detail:this.address_detail,cargo_person:this.person,phone:this.phone};
    },
    cmt_address(){
        var validate_res =this.validate();
        if(validate_res){
          return;
        }
        this.$http.post("http://123.56.86.203/addressadd",
          {
            address_data:this.address_data
          },
          {emulateJSON:true}
        ).then(response=>{
            var data=response.data;
            if(data.status == 0){
                window.location.reload();
            }else{
              alert(data.info);
            }
        })
    },
    save_address(){
        var validate_res =this.validate();
        if(validate_res){
          return;
        }
        this.address_data.id=this.address_id;
        this.$http.post("http://123.56.86.203/addresssave",
          {
            address_data:this.address_data
          },
          {emulateJSON:true}
        ).then(response=>{
            var data=response.data;
            if(data.status == 0){
                window.location.reload();
            }else{
              alert(data.info);
            }
        })
    },
    get_address(){
        var uid = this.$cookie.get('uid');
      this.$http({
          method:'GET',
              url:'http://123.56.86.203/address?uid='+uid,
      }).then(function(info){
          var data=info.data;
          if(data.status == 0){
            this.addressdata=data.info;
          
          }
      },function(error){
            console.log(error);
      })
    },
    changeaddress(index){
      if(index==-1){
        this.is_show=false;
        this.person='';
        this.phone='';
        this.address_detail='';
        this.address_basic='';
        this.is_address=false;
        this.address_id='';
        return false;
      }
      this.is_show=!this.is_show;
      this.person=this.addressdata[index].cargo_person;
      this.phone=this.addressdata[index].phone;
      this.address_detail=this.addressdata[index].address_detail;
      this.address_basic=this.addressdata[index].address_basic;
      this.is_address=true;
      this.address_id=this.addressdata[index].id;
    },
    set_defalut(index){
        if(this.addressdata[index].is_default == 1){
           alert('该地址已为默认地址');
           return;
        } 
        var data={id:this.addressdata[index].id,is_default:1,uid:this.$cookie.get('uid')};
        this.$http.post("http://123.56.86.203/setdefalut",
          {
            data:data
          },
          {emulateJSON:true}
        ).then(response=>{
            var data=response.data;
            if(data.status == 0){
                window.location.reload();
            }else{
              alert(data.info);
            }
        })
    }
  }
}
</script>

<style scoped>
.fade-enter-active, .fade-leave-active {
    transition: all 1s;
}

.fade-enter, .fade-leave-active {
    opacity: 0;

}
#address{
  width:1000px;
  margin:0 auto;
}
.bt{
   width: 100%;
  height: 25px;
  font:13px/25px '微软雅黑';
}
.user_area{
  width: 100%;
  margin:10px;
}
.user_area .navigation{
  padding-top: 15px;
  padding-bottom: 15px;
  width: 12%;
  background-color: rgba(255,255,255,0.6);
  float: left;

}
.user_area .navigation ul{
  width: 100%;
}
.user_area .navigation ul li a{
  width: 85%;
  font:15px/30px '微软雅黑';
  color:#666;
  padding-left: 15%;
}
.user_area .navigation ul .select a{
  color:#FF4400;
  background-color: rgba(255,255,255,0.5);
}
.user_area .main{
  float: left;
  width: 75.5%;
  margin-left: 3%;
  background-color: rgba(255,255,255,0.6);
  padding: 30px 4%;
}
.router-link-active{
  background-color: rgba(255,255,255,0.5);
}
.user_area .main table{
  width: 100%;
  text-align: center;
}
.table2 tr th{
  font:22px/35px '微软雅黑';
  height: 50px;
  border-bottom: 1px solid #ccc;
}
.table2 tr td{
  height: 45px;
  font:bold 14px/22px '微软雅黑';
  color:#666;
  border: 1px solid #E2E2E2;

}
.table2 .tr td{
  font:bold 15px/28px '微软雅黑';
  color:#000;
  height: 50px;
  background-color: #F2F2F2;
}
.table2 tr td a{
   font:bold 14px/22px '微软雅黑';
  color:#666;
 
}
.table2 tr td span{
    font:bold 14px/22px '微软雅黑';
  color:#666; 
}
.table2 tr td .default{
  width: 80px;
  text-align: center;
  color:#fff;
  height: 32px;
  font:14px/30px '微软雅黑';
  background-color:#34A8FF;
  border: 1px solid #34A8FF;
}
.table2 tr td .change{
  width: 80px;
  text-align: center;
  color:#fff;
  height: 32px;
  font:14px/30px '微软雅黑';
  background-color:#F7BF3A;
  border: 1px solid #F7BF3A;
  margin-left:20px;
}
.table2 tr td .cmt{
  width: 220px;
  text-align: center;
  color:#fff;
  height: 40px;
  font:14px/38px '微软雅黑';
  background-color:#5FB878;
  border: 1px solid #5FB878;
  margin-left:20px;
}
.table2 tr td .warning{
  background-color:#F8C64F;
  border: 1px solid #F8C64F;
}
.table2 tr td input{
  margin-left: 20px;
  border: 1px solid #E6E6E6;
  width: 250px;
  height: 28px;
  font:15px/26px '微软雅黑';
  color:#666;
}

</style>
